<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
    <a class="navbar-brand" href="#/">Chinese-Poetry</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <b-nav-item-dropdown text="蒙 学" left>
          <b-dropdown-item href="#/sanzijing" @click="queryData('/mengxue/sanzijing-new.json')">三字经</b-dropdown-item>
          <b-dropdown-item href="#/baijiaxing" @click="queryData('/mengxue/baijiaxing.json')">百家姓</b-dropdown-item>
          <b-dropdown-item href="#/qianziwen" @click="queryData('/mengxue/qianziwen.json')">千字文</b-dropdown-item>
          <b-dropdown-item href="#/dizigui" @click="queryData('/mengxue/dizigui.json')">弟子规</b-dropdown-item>
          <b-dropdown-item href="#/youxueqionglin" @click="queryData('/mengxue/youxueqionglin.json')">幼学琼林</b-dropdown-item>
          <b-dropdown-item href="#/zhuzijiaxun" @click="queryData('/mengxue/zhuzijiaxun.json')">朱子家训</b-dropdown-item>
          <b-dropdown-item href="#/qianjiashi"  @click="queryData('/mengxue/qianjiashi.json')">千家诗</b-dropdown-item>
          <b-dropdown-item href="#/guwenguanzhi" @click="queryData('/mengxue/guwenguanzhi.json')">古文观止</b-dropdown-item>
          <b-dropdown-item href="#/tangshisanbaishou" @click="queryData('/mengxue/tangshisanbaishou.json')">唐诗三百首</b-dropdown-item>
          <b-dropdown-item href="#/shenglvqimeng" @click="queryData('/mengxue/shenglvqimeng.json')">声律启蒙</b-dropdown-item>
          <b-dropdown-item href="#/wenzimengqiu" @click="queryData('/mengxue/wenzimengqiu.json')">文字蒙求</b-dropdown-item>
          <b-dropdown-item href="#/zengguangxianwen" @click="queryData('/mengxue/zengguangxianwen.json')">增广贤文</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown text="诗 歌" left>
          <b-dropdown-item href="#/tangshi" @click="queryTangShiData('tangshi')">唐 诗</b-dropdown-item>
          <b-dropdown-item href="#/songshi" @click="queryTangShiData('songshi')">宋 诗</b-dropdown-item>
          <!--<b-dropdown-item href="#">其 他</b-dropdown-item>-->
        </b-nav-item-dropdown>
        <li class="nav-item">
          <a class="nav-link" href="#/songci" @click="queryTangShiData('songci')">宋 词</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#/lunyu" @click="queryData('/lunyu/lunyu.json')">论 语</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#/shijing" @click="queryData('/shijing/shijing.json')">诗 经</a>
        </li>
        <b-nav-item-dropdown text="四书五经" left>
          <b-dropdown-item href="#/daxue" @click="queryData('/sishuwujing/daxue.json')">大学</b-dropdown-item>
          <b-dropdown-item href="#/zhongyong" @click="queryData('/sishuwujing/zhongyong.json')">中庸</b-dropdown-item>
          <b-dropdown-item href="#/mengzi" @click="queryData('/sishuwujing/mengzi.json')">孟子</b-dropdown-item>
        </b-nav-item-dropdown>
        <!--<li class="nav-item">
          <a class="nav-link" href="#">幽梦影</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">花间集</a>
        </li>-->
      </ul>
      <!--<form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
      </form>-->
      <ul class="navbar-nav mt-2 mt-md-0">
        <b-nav-item-dropdown text="lang" left>
          <b-dropdown-item href="#" @click="changeLang('ft')">原文</b-dropdown-item>
          <b-dropdown-item href="#" @click="changeLang('sp')">简体</b-dropdown-item>
        </b-nav-item-dropdown>
      </ul>
    </div>
  </nav>
</template>
<script>
  export default {
    name: 'Navbar',
    data () {
      return {
        selectedLang: ''
      }
    },
    methods: {
      queryData (url) {
        this.$store.dispatch('loadDataMsg', url)
      },
      queryTangShiData (type) {
        let url = null
        let urlIndex = 0
        let index = 1
        if (type === 'tangshi') {
          let tangshiIndex = window.localStorage.getItem('tangshi_index')
          if (tangshiIndex) {
            index = tangshiIndex % 1000
          } else {
            window.localStorage.setItem('tangshi_index', 1)
          }
          if (index === 0) {
            urlIndex = (parseInt(tangshiIndex / 1000) - 1) * 1000
          } else {
            urlIndex = parseInt(tangshiIndex / 1000) * 1000
          }
          url = '/poet/poet.tang.' + urlIndex + '.json'
        } else if (type === 'songshi') {
          let songshiIndex = window.localStorage.getItem('songshi_index')
          if (songshiIndex) {
            index = songshiIndex % 1000
          } else {
            window.localStorage.setItem('songshi_index', 1)
          }
          if (index === 0) {
            urlIndex = (parseInt(songshiIndex / 1000) - 1) * 1000
          } else {
            urlIndex = parseInt(songshiIndex / 1000) * 1000
          }
          url = '/poet/poet.tang.' + urlIndex + '.json'
        } else if (type === 'songci') {
          let songciIndex = window.localStorage.getItem('songci_index')
          if (songciIndex) {
            index = songciIndex % 1000
          } else {
            window.localStorage.setItem('songci_index', 1)
          }
          if (index === 0) {
            urlIndex = (parseInt(songciIndex / 1000) - 1) * 1000
          } else {
            urlIndex = parseInt(songciIndex / 1000) * 1000
          }
          url = '/ci/ci.song.' + urlIndex + '.json'
        } else {
          return
        }
        this.$store.dispatch('loadDataMsg', url)
      },
      changeLang (lang) {
        this.selectedLang = lang
        this.$store.dispatch('changeLang', {lang: lang})
        window.localStorage.setItem('selectedLang', this.selectedLang)
      }
    }
  }
</script>
